<template>
  <div class="flex-1 page_contain">
    <el-page-header
      @back="goBack"
      class="mt-[10px] ml-[10px] text-[12px] mb-[-1px] page_header"
    >
      <template #content>
        <span class="text-[12px] font-400 mr-3 c-blueGray">
          {{ route?.query?.equipCode || equipCode || "" }} 产品列表
        </span>
      </template>
    </el-page-header>
    <div class="app-container">
      <!-- 搜索框 -->
      <div class="search-container">
        <el-form :model="searchParam" :inline="true" label-width="72px">
          <el-form-item label="产品型号">
            <el-select
              v-model="searchParam.productModel"
              placeholder="请选择产品型号"
              clearable
              filterable
              @change="productChange"
            >
              <el-option
                v-for="item in productList"
                :key="item.productModel"
                :label="item.productModel"
                :value="item.productModel"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="参数类型">
            <el-radio-group v-model="searchParam.processDataType">
              <el-radio-button label="2">工艺加工参数</el-radio-button>
              <el-radio-button label="3">工艺过程参数</el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="search">
              <i-ep-search />
              搜索
            </el-button>
            <el-button @click="reset">
              <i-ep-refresh />
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表 -->
      <el-card shadow="never" class="table-container">
        <el-table
          ref="dataTableRef"
          v-loading="loading"
          :data="tableData"
          highlight-current-row
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            label="工序"
            prop="processCode"
            fixed="left"
            min-width="120"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="产品型号"
            prop="productModel"
            align="center"
            min-width="140"
            show-overflow-tooltip
          />
          <el-table-column
            label="程序名"
            prop="programName"
            min-width="120"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="采集时间"
            prop="collectionTime"
            min-width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="参数类型"
            prop="processDataType"
            min-width="150"
            align="center"
            show-overflow-tooltip
          >
            <template #default="scope">
              <el-tag v-if="scope.row.processDataType == 2">加工参数</el-tag>
              <el-tag type="success" v-if="scope.row.processDataType == 3"
                >过程参数</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            label="参数名"
            prop="parameterName"
            min-width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="参数描述"
            prop="parameterDesc"
            min-width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="采集值"
            prop="parameterValue"
            min-width="100"
            align="right"
            show-overflow-tooltip
          />
          <el-table-column
            label="参考值"
            prop="referenceValue"
            min-width="100"
            align="right"
            show-overflow-tooltip
          />
          <el-table-column
            label="控制范围"
            min-width="150"
            align="right"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span
                v-if="scope.row.lowerLimitValue == scope.row.upperLimitValue"
                >{{ scope.row.lowerLimitValue ?? "" }}</span
              >
              <span v-else
                >{{ scope.row.lowerLimitValue }} -
                {{ scope.row.upperLimitValue }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="监控结果" align="center" min-width="150">
            <template #default="scope">
              <el-tag v-if="scope.row.monitorResult == 1" type="warning"
                >变更未超控制范围</el-tag
              >
              <el-tag v-if="scope.row.monitorResult == 2" type="danger"
                >变更超过控制范围</el-tag
              >
              <el-tag
                v-if="
                  scope.row.monitorResult != 2 && scope.row.monitorResult != 1
                "
                type="success"
                >正常</el-tag
              >
            </template>
          </el-table-column>
          <!-- 暂时没有工位字段 -->
          <!-- <el-table-column
            label="工位"
            prop="remarks"
            min-width="150"
            align="center"
            show-overflow-tooltip
          /> -->
          <el-table-column
            label="工单"
            prop="orderNo"
            min-width="150"
            align="center"
            show-overflow-tooltip
          />
        </el-table>

        <el-pagination
          :background="true"
          :current-page="pageable.pageNum"
          :page-size="pageable.pageSize"
          :page-sizes="[10, 25, 50, 100]"
          :total="pageable.total"
          layout="total, sizes, prev, pager, next, jumper"
          class="mt-[20px]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </div>
</template>

<!-- 手动挂载左侧菜单高亮 -->
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  // 页面进入路由处理
  beforeRouteEnter(to: any, from: any, next: any) {
    to.meta.defaultActive = "/psm/psmParamMonitoring";
    next();
  },
});
</script>

<script lang="ts" setup>
import request from "@/utils/request";
import { useTable } from "@/utils/useTable";
import dayjs from "dayjs";
import { useRoute, useRouter } from "vue-router";
import { deepClone } from "@/utils/commonHooks";
import { useTagsViewStore } from "@/store/modules/tagsView";
import { getMdmproductinfosApi1 } from "@/utils/commonData";
const tagsViewStore = useTagsViewStore();
const route = useRoute();
const router = useRouter();

defineOptions({
  name: "PSMPSMPARAMMONITORINGLIST",
  inheritAttrs: false,
});

const props = defineProps({
  equipCode: {
    //设备编号
    type: String,
    default: () => {
      return "";
    },
  },
  equipId: {
    //设备Id
    type: String,
    default: () => {
      return "";
    },
  },
});
const { equipCode, equipId } = toRefs(props);

// 返回
const goBack = () => {
  tagsViewStore.delView(route).then((res: any) => {
    router.replace({
      name: "PSMPSMPARAMMONITORING",
    });
  });
};

// 请求参数
const requestApi = "/dmpDosPcm/psmprocessdata/queryByPage";
// const requestApi = "/dmpDosPcm/psmequipmentproduct/getList";

// 是否需要分页
const pagination = true;

const initParam = {};

// 初始化搜索参数数据
const searchParamInit = {
  productModel: "",
  processDataType: "2", // 参数类别
  deviceId: route?.query?.equipId || "",
};

const deleteParam = {
  api: "/system/sysRole/delete",
  data: {},
};

// 如果初始化表格需要排序=》const initParam = reactive({sort:''});
// 监听页面 initParam 改化，重新获取表格数据
// watch(() => initParam, getTableList, { deep: true });

// 数据请求错误后处理
function requestError() {}

// 数据请求错误后处理
// function dataCallBack() {}   //需要处理
const dataCallBack = ref(undefined); //无需二次数据处理&不传赞数也行

// 表格操作 Hooks
const {
  tableData,
  pageable,
  searchParam,
  loading,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
}: any = useTable(
  requestApi,
  initParam,
  searchParamInit,
  pagination,
  dataCallBack.value,
  requestError,
  deleteParam
);

// 获取产品型号列表
const productList = ref<any>([]);
async function getProductList() {
  const list: any =
    (await getMdmproductinfosApi1({ deviceId: route?.query?.equipId || "" })) ||
    [];
  productList.value = [{ productModel: "全部", id: "" }, ...list];
}
function productChange(id: string) {
  // if (id) {
  //   const current: any =
  //     productList.value?.filter((e: any) => e.id === id)[0] ?? {};
  //   searchParam.value.productCode = current.productCode || "";
  // } else {
  //   searchParam.value.productCode = "";
  // }
}

onMounted(() => {
  searchParam.value.deviceId = route?.query?.equipId || "";
  // 获取产品型号列表
  getProductList();
  getTableList();
});
</script>

<style lang="scss" scoped>
:deep(.el-page-header__header) {
  .el-page-header__icon .el-icon {
    color: rgba(148, 163, 184, 1);
    font-size: 14px;
  }
  .el-page-header__back {
    color: rgba(148, 163, 184, 1);
  }
}
</style>
